<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <table class="table table-bordered" style="max-width: 600px;margin: 30px auto">
      <thead>
        <tr>
          <th>商品名</th>
          <th>价格</th>
          <th>购买数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="5" align="center" v-if="items.length===0">
            暂无商品
          </td>
        </tr>
        <tr v-for="(item,index) in items">
          <td>
            <input @change="itemCheckedChange" type="checkbox" v-model="item.checked">
            {{item.name}}
          </td>
          <td>
            ￥{{item.price}}
          </td>
          <td>
            <button @click="addNum(index)">+</button>
            {{item.num}}
            <button @click="reduceNum(index)">-</button>
          </td>
          <td>
            {{ (item.num * item.price).toFixed(2) }}
          </td>
          <td>
            <button @click="delItem(index)" class="btn btn-danger btn-sm">删除</button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>
            合计
          </td>
          <td colspan="4">
            全选：
            <input type="checkbox" @change="allCheckedChange" v-model="allChecked">
            总价格：
            ￥{{total}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        // 购买商品
        items: [
          {
            name: '商品1',
            price: 10,
            num: 1,
            checked: true
          },
          {
            name: '商品2',
            price: 198.9,
            num: 1,
            checked: true
          },
          {
            name: '商品3',
            price: 88,
            num: 1,
            checked: true
          },
          {
            name: '商品4',
            price: 100,
            num: 2,
            checked: true
          }
        ],
        allChecked: true,
        total: 0
      },
      methods: {
        allCheckedChange() {
          // 点击改变全选状态
          this.items.forEach(item => {
            item.checked = this.allChecked
          })
          this.calcTotal();
        },
        itemCheckedChange() {
          // 商品选中状态改变
          this.calcTotal();
          this.setAllChecked();
        },
        delItem(index) {
          // 删除购买商品
          if (confirm('您确认删除吗?')) {
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        reduceNum(index) {
          // 减少购买数量
          this.items[index].num--;
          if (this.items[index].num <= 1) {
            this.items[index].num = 1
          }
          this.calcTotal();
        },
        addNum(index) {
          // 增加购买数量
          this.items[index].num++;
          this.calcTotal();
        },
        calcTotal() {
          // 计算总价格
          /* 
            所有的选中商品的 价格*数量总合
          */
          // 过滤未选中商品
          const checkedItems = this.items.filter(item => item.checked);
          // 累加
          this.total = 0;
          checkedItems.forEach(item => {
            this.total += item.num * item.price
          })
          // 保留2位小数
          this.total = parseFloat(this.total.toFixed(2));
        },
        setAllChecked() {
          // 设置商品全选状态
          /* 
            所有商品都是选中状态则全选
            否则 取消全选
          */
          this.allChecked = this.items.every(item => item.checked)
        }
      }
    })
    vm.calcTotal();
    vm.setAllChecked();
  </script>
</body>

</html>